<template>
  <el-dialog
      :title="title"
      :visible.sync="show"
      width="30%"
      :close-on-click-modal="closeOnClickModal"
      @close="hiddenReset"
      :before-close="hiddenReset">
    <!--@opened="resetForm"-->
    <div class="dialog-wrapper">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
        <el-form-item label="上级菜单" v-if="parentName">
          <el-input v-model="parentName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" maxlength="40" show-word-limit placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="路径" prop="action">
          <el-input v-model.trim="form.action" placeholder="请输入路径">
          </el-input>
        </el-form-item>
        <el-form-item label="样式" prop="icon">
          <el-input v-model.trim="form.icon" placeholder="请输入名称">
          </el-input>
        </el-form-item>
        <el-form-item label="属性" prop="level">
          <el-checkbox v-model="form.level">权限</el-checkbox>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
            <el-button @click="hiddenReset" size="small">取 消</el-button>
            <el-button type="primary" size="small" @click="addBaseGroupHandle">确 定</el-button>
        </span>
  </el-dialog>
</template>

<script>
import {dialog} from '@/common/mixin'

export default {
  name: "addMenuDialog",
  mixins: [dialog],
  props: ['parentName', 'parentId', 'title'],
  computed: {
    rules() {
      return {
        name: [{
          required: true,
          message: '名称不能为空',
          trigger: ['blur']
        }]
      }
    }
  },
  data() {
    return {
      form: {
        name: '',
        action: '',
        icon: '',
        type: '',
        level: '',
      }
    }
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields()
    },
    addBaseGroupHandle() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let params = {};
          params.name = this.form.name;
          params.action = this.form.action;
          params.icon = this.form.icon;
          if (this.form.level) {
            params.level = "BUTTON"
          } else {
            delete params.level
          }
          await this.$post(this.$api.systemSettings.menuManage.addMenu, {
            ...params,
            parentId: this.parentId ? this.parentId : null,
          });
          this.$alert('添加成功！').then(() => {
            this.hidden()
            this.$emit('success')
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>